<template>
  <div class="main">
    <div class="top"></div>
    <div class="mid">
      <div v-for="(data,index) in getTh"
           :key="index"
           :class="getClass(index)"
           :ref="getClass(index)"
           style="height:100%;border: 1px solid green;display:none">
        <div style=""
             v-if="showFlag(index)">class:{{index}}</div>

      </div>
    </div>
    <div class="fotter"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
    }
  },
  computed: {
    getTh () {
      let arr = [
        { title: 'one', index: 1, child: [{ text: 'a' }], flag: true },
        { title: 'two', index: 2, child: [{ text: 'b' }, { text: 'c' }], flag: false },
        { title: 'three', index: 3, child: [{ text: 'b' }, { text: 'c' }], flag: false },
        { title: 'four', index: 4, child: [{ text: 'b' }, { text: 'c' }], flag: false }
      ]
      return arr
    },
    getClass () {
      return function get (index) {
        let arr = this.getTh
        for (let i = 0; i < arr.length; i++) {
          debugger
          if (arr[i].flag === true && index === i) {
            return 'ok'
          }
        }

        return 'class' + index
      }
    },
    showFlag () {
      return function test (val) {
        let arr = this.getTh
        for (let i = 0; i < arr.length; i++) {
          debugger
          if (arr[i].flag === true && val === i) {
            debugger
            return true
          } else {

          }
        }

        return false
      }
    }
  }
}
</script>
<style scoped>
.main {
  border: 1px solid black;
  height: calc(100% - 10px);
  display: flex;
  padding: 5px 5px 5px 5px;
  flex-direction: column;
}
.top {
  height: 100px;
  border: 1px solid red;
}
.mid {
  margin-top: 10px;
  flex: 1;
  border: 1px solid yellow;
  padding: 10px 10px 10px 10px;
}
.fotter {
  height: 100px;
  border: 1px solid blue;
}
.ok {
  display: block !important;
}
</style>
